<template>
  <div class="product-item" v-if="data">
    <div class="product-item-name">
      <div
        class="tab"
        v-if="data.dbway != null && data.dbway != 'null' && data.dbway != ''"
      >
        <div class="tab_sj"></div>
        <p>{{ data.dbway }}</p>
      </div>
      <img :src="data.show05" alt="" />
      <h5 v-if="data.guarantee">{{ data.guarantee }}</h5>
    </div>
    <div class="chen">
      <div class="product-item-productname">
        <div class="productname">
          <h3 style="color: #ff752c">{{ data.productname }}</h3>
          <h4
            v-for="areanameItem in data.areaname1"
            :key="areanameItem"
            :class="{
              hhjczq: areanameItem == '花湖机场专区',
              shczq: areanameItem == '首衡城专区',
              whzq:
                areanameItem == '武汉专区 ' ||
                areanameItem == '武汉专区' ||
                areanameItem == '武汉东湖高新专区' ||
                areanameItem == '武汉经开专区',
            }"
          >
            {{ areanameItem }}
          </h4>
        </div>

        <div class="product-item-success">
          <ul v-if="data.amount || data.month || data.radio">
            <li>
              <h4>{{ data.amount }}<span> </span></h4>
              <!-- <h5>最高额度</h5> -->
              <h5>{{ data.showamount }}</h5>
            </li>
            <li>
              <h4>{{ data.month }}<span> </span></h4>
              <!-- <h5>最高期限</h5> -->
              <h5>{{ data.showmonth }}</h5>
            </li>
            <li>
              <h4>{{ data.radio }}<span> </span></h4>
              <h5>{{ data.showradio }}</h5>
              <!-- <h5>年化利率</h5> -->
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { myPostFetch } from "@/utils";
export default {
  data() {
    return {
      // 产品ID状态变量
      procedureId: "",
      productcode: null,
      data: null,
    };
  },
  mounted() {
    // 从路由地址中获取产品ID,保存到状态变量中
    this.procedureId = localStorage.getItem("productcodeId");
    this.productcode = localStorage.getItem("productcode");

    // 判断路由地址中是否又row字段
    if (this.$route.query.row) {
      this.row = this.$route.query.row;
    }
    this.selectkj();
  },
  methods: {
    async selectkj() {
      let url = "/api/hubeibusienss/findproductfile";
      let params = {
        productcode: this.productcode,
      };
      let data = await myPostFetch(url, params);
      this.data = data.data.productSub;
      if (this.data.areaname != "" && this.data.areaname != null) {
        this.data.areaname1 = this.data.areaname.split(";");
      }
      this.data.show05 = data.data.filepath;
    },

    // 点击申请
    apply() {
      this.row = 1;
      document.documentElement.scrollTop = 0;
    },
  },
};
</script>

<style lang="scss" scoped>
// 产品
.product-item {
  display: flex;
  align-items: center;
  position: relative;
  height: 160px;
  background: #fff;
  // border-radius: 6px;
  margin-top: 15px;

  // 产品名称
  .product-item-name {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 250px;
    height: 160px;
    background: #d7e8ff;
    img {
      width: 140px;
    }
    h5 {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 20px;
      width: 125px;
      height: 25px;
      color: #0a7be0;
      font-size: 14px;
      font-weight: 500;
      border-radius: 3px;
      background-color: rgb(119, 173, 250, 0.2);
    }
    .tab {
      display: flex;
      justify-content: center;
      position: absolute;
      left: 15px;
      top: 0;
      width: 26px;
      height: 50px;
      background: #ff752c;
      .tab_sj {
        position: absolute;
        bottom: 0;
        width: 0px;
        height: 0px;
        border: 13px solid #d7e8ff;
        border-left-color: transparent;
        border-top-color: transparent;
        border-right-color: transparent;
      }
      p {
        margin-top: 5px;
        font-size: 13px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        line-height: 0px;
        color: #fff;
        writing-mode: vertical-rl;
        line-height: 50px;
      }
    }
  }
  .chen {
    box-sizing: border-box;
    padding: 20px 50px;
    display: flex;
    flex-direction: column;
    width: 60%;
    height: 100%;
    .product-item-productname {
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 100%;
      .productname {
        display: flex;
        align-items: center;
        h3 {
          font-size: 20px;
          font-family: Source Han Sans SC;
          font-weight: bold;
          color: #0a7be0;
        }
        h4 {
          box-sizing: border-box;
          padding: 4px 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          height: 25px;
          color: #fff;
          font-size: 14px;
          margin-left: 20px;
          font-weight: 500;
          &.hhjczq {
            background-color: #0991d1;
          }
          &.shczq {
            background-color: #359f6e;
          }
          &.whzq {
            background-color: #df923c;
          }
        }
      }
    }
    .product-item-success {
      margin-top: 10px;
      ul {
        display: flex;
        justify-content: space-between;

        li {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          height: 70px;
          h4 {
            font-size: 25px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #0a7be0;
            text-align: center;
            span {
              font-size: 18px;
            }
          }
          h5 {
            font-weight: 400;
            color: #858585;
            text-align: center;
            font-size: 18px;
            color: #181818;
            font-family: Microsoft YaHei;
          }
        }
      }
    }
  }
}
</style>
